<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery遍历对象each方法</title>
    <script src="../jquery/jquery.v3.7.1.js"></script>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>
        <p>jQuery 元素操作：</p>
        <p>主要是遍历、创建、添加、删除元素操作。</p>
        <p>遍历元素：jQuery隐式迭代，是对同一类元素做同样的操作。如果想要给同一类元素做不同的操作，就需要用到遍历。</p>
        <p>语法：$('div').each(function(index, domEle){函数体})。each() 里面的是一个回调函数，其中 index表示索引号，domEle表示返回的每一个元素。</p>
        <p>想要使用 jQuery方法，需要给这个 dom转换为 jQuery对象 $('domEle')。</p>
    </div>
    <script>
        $(function(){
            // jQuery遍历对象each方法
            var arr = ['red','green','blue','black']
            $('div').each(function(index,domEle){
                //回调函数中的第一个参数是索引号，第二个参数是dom元素对象(原生 dom对象)。
                $(domEle).css('color',arr[index])
            })

            // jQuery遍历数据 $.each方法
            // $.each方法遍历数组
            $.each(arr,function(index,ele){
                //回调函数中的第一个参数是 arr数组的索引号，第二个参数是 arr数组中的值。
                console.log(index,ele)
            })
            // $.each方法遍历对象
            $.each({
                name:'andy',
                age:18,
                sex:'男'
            },function(index,ele){
                //回调函数中的第一个参数是对象的属性名，第二个参数是对象的属性值。
                console.log(index,ele)
            })
        })
    </script>
</body>
</html>